iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
3

基本上使用 Vue CLI 是一定要使用 Router 的啦,如此才是邁向 Vue 完全體的第一步阿,不這樣做就等於失去這辛辛苦苦建立起來的的開發環境意義了,ㄏㄏ其實根本就都不辛苦, 這不是 vue create 給他自己跑就結束了嗎 ???

這邊我會拿 Vue Router 官網的例子解說基本概念再配合 CLI 的開發模式來一步步解說。

Vue Router 基本簡單用法

要使用 Router 最簡單且基本要具備的步驟如下:

引入 Vue 及 Vue Router。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  1. 定義組件
官網說到: 
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

模塊化編程就是比如說像我們 CLI 這樣建構出來的專案,元件分得很開,並且只在需要的地方引入
最後依靠比如說 webpack、parcel 這類打包工具來輸出檔案的機制,就是模塊化編程。

其實他沒有一個很明顯的定義分界,當我們看見諸如import... export... require...,基本上和模塊編程都沾得上邊。



let vue1 = {
	template: `<div>負責首頁資訊的組件...</div>`
}

let vue2 = {
	template: `<div>負責文章區塊的組件...</div>`
}
  1. 定義路由,以及該路由要使用的組件。
let routes = [
	{ path: '/', component: vue1 },
	{ path: '/article', component: vue2 }
]
  1. 創建路由實例並丟給 Vue 掛載
let router = new VueRouter({
	routes
})

let app = new Vue({
  router
}).$mount('#app')
  1. 使用 Router
<router-link to="/">前往首頁</router-link>
<router-link to="/article">前往首頁</router-link>

<router-view/>

<router-link> 的部分會被解析成為 <a> 標籤,看我們點什麼連結 <router-view/> 就會負責切換顯示 vue1 vue2 兩個組件,並且網址的部分會透過 window history API 進行切換不重新整理。

而這邊注意 router-link to="/article",路由定義的 path: '/article',... article 要對到, 才會正確的渲染 vue2。

https://codepen.io/fiftybillionHuang/pen/jOqZWLP

看 CLI 專案

知道基本用法後,現在回到我們的專案 App.vue 這裡首先看到 <router-link><router-view/>的部分,現在我們知道這是一定可以運作的,所以接下來我們要來查看具體的設定過程。

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

既然是 Vue Router,所以相關的設定想當然就是在 router 裡的 index.js 摟。

index.js 內部

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 注意這邊 export default router 對應到 main.js 的 import
export default router

有沒有發現和基本使用的部分幾乎一模一樣,首先 import Vue 和 Vue Router 進來,在 import 一個要用的 Home 組件,接著就是官網說的使用模塊化機制要 Vue.use。

接著回到原本的步驟

  1. 定義組件,或者引入早就設計好的組件 ( Home )
  2. 定義路由和路由要使用的組件,不過這裡多了個 name ,以後就知道怎麼用了。
  3. 創建實例並掛載
  4. 掛載的部分在 main.js 中
main.js 裡面...

import Vue from 'vue'
import App from './App.vue'
// 注意這邊 import router from './router' 就是將已經創建好的實例拿出來
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
	// 然後掛載進來
  router,
  store,
  render: h => h(App)
}).$mount('#app')

透過這樣的模式,清楚看見我們要管理的檔案設定通通都在 router 的 index.js 內,在這邊可以自行建立一個隨意內容的 .vue 檔,並且在 index.js 中的 routes 引入,隨後前往 App.vue 放一個新的 <router-link> 試試,關鍵就是 to="/xxx",path: "/xxx",兩個要有對到,然後補充一點:

// /* webpackChunkName: "about" */這個註釋是有含意的,建議前往文件查看
// 不過 webpack 我自己也是有點快看到吐血,就算從頭照著一步步做,也不見得能無痛學會阿

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

ES2015 之後有 import、export 語法,其中 import ( ) 是另外一個用法,用於動態的導入模塊,也就是說可以減少有些在檔案一開始靜態 import 的的模組沒被用到的載入浪費。這裡具體也可以看 Vue異部組件MDN 和 webpack 文件1文件2

工商一下,輕巧卻強大的打包工具- Parcel

講那麼多,import ( '放你寫好的 .vue 檔路徑就好了啦' ),webpackChunkName: "about" 什麼的都先不要也沒關西啦,東西沒有要做那麼大搞那麼複雜幹嘛 ? 框架和工具被開發出來是要幫助我們加速開發的,而不是在那邊搞老半天設定的部分結果用不出來,對於這點我真的對 webpack 十分的不滿意,建議大家有時間的話可以玩玩 Parcel ,非常的小巧輕便,也支持 .vue 的開發方式,重要的是,幾乎不需要什麼複雜設定阿 ! 等我這篇 30 天寫完,我就要去玩 Parcel 準備跳槽了啦。

終於要準備進入專案的部分

OK,到此我們算是到了一個階段,從下一章開始我們會正式進入專案。ㄏㄏ搞了那麼久終於到這一步了,其實不太知道要從哪邊開始下手才好,所以在進入下一章前,我們先來過濾過濾我們的題目。

我們的目標是 "部落格 + 後台管理"。所以兩個先拆開,個別看看會需要哪些功能,這邊都先以基本的就好,太五花八門的就先別做了,不然 30 天做不完呀。

其實就是分兩個角色,各自可以使用的功能 :

  • 訪客
  1. 瀏覽文章
  2. 在文章底下留言
  3. 關鍵字搜尋文章
  • 管理者
  1. 訪客一樣的功能
  2. 文章的新增編輯刪除
  3. 個人資料的編輯
  4. 屏蔽訪客的留言

不管了就先這樣,有想到什麼特殊的就留言給我吧,我再考慮要不要做啦哈哈,我們先完成基本的功能架構,後面再來慢慢地擴增,明天開始我們先準備一個首頁,我再視自己情況,我們就再準備一個後台介面,本章的 Router 屬於最基本的應用,後面沒意外也會使用到更進階的用法時,用補充的方式來解說。


沒事也可以逛逛我們其他團隊成員的文章啦 ~~
eien_zheng: 前端小嘍嘍的Golang學習旅程_The journey of learning Golang 系列
PollyPO技術: 前端設計轉前端工程師-JS踩坑雜記 30 天 系列
阿電: 忍住不打牌位,只要30天VueJS帶你上A牌 系列
喬依司: 實作經典 JavaScript 30 系列


上一篇
Day 07: Vue-CLI 先認識專案目錄
下一篇
Day 09: BootstrapVue 準備個首頁
系列文
Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言